
import { _decorator, Component, Node, Label, ToggleComponent, ButtonComponent, EditBoxComponent, LabelComponent, UITransformComponent, director, ShadowFlow, SystemEvent, systemEvent, EventKeyboard, KeyCode, ScrollViewComponent, Vec2 } from 'cc';
import { Electron } from './Electron';
const { ccclass, property } = _decorator;

@ccclass('UI')
export class UI extends Component {

    @property(UITransformComponent)
    canvas: UITransformComponent = null!;

    @property({displayName: "全屏复选按钮", tooltip: "全屏复选按钮", type: ToggleComponent})
    tg0: ToggleComponent = null!;

    @property({displayName: "打开开发者工具复选按钮", tooltip: "打开开发者工具复选按钮", type: ToggleComponent})
    tg1: ToggleComponent = null!;

    @property({displayName: "阴影复选按钮", tooltip: "阴影复选按钮", type: ToggleComponent})
    tg2: ToggleComponent = null!;

    @property({displayName: "天空盒复选按钮", tooltip: "天空盒复选按钮", type: ToggleComponent})
    tg3: ToggleComponent = null!;

    @property({displayName: "全局雾复选按钮", tooltip: "全局雾复选按钮", type: ToggleComponent})
    tg4: ToggleComponent = null!;

    @property({displayName: "分辨率宽输入框", tooltip: "分辨率宽输入框", type: EditBoxComponent})
    eb0: EditBoxComponent = null!

    @property({displayName: "分辨率高输入框", tooltip: "分辨高宽输入框", type: EditBoxComponent})
    eb1: EditBoxComponent = null!

    @property({displayName: "窗口宽输入框", tooltip: "窗口宽输入框", type: EditBoxComponent})
    eb2: EditBoxComponent = null!

    @property({displayName: "窗口高输入框", tooltip: "窗口高输入框", type: EditBoxComponent})
    eb3: EditBoxComponent = null!

    @property({displayName: "显示窗口状态的文字", tooltip: "显示窗口状态的文字", type: LabelComponent})
    label: LabelComponent = null!;

    @property({displayName: "显示信息的文字", tooltip: "显示信息的文字", type: LabelComponent})
    label_state: LabelComponent = null!;

    @property({displayName: "显示分辨率文字", tooltip: "显示屏幕支持的所有分辨率和当前分辨率文字", type: LabelComponent})
    label_resolution: LabelComponent = null!;

    @property({displayName: "设置界面", tooltip: "设置界面", type: Node})
    UI: Node = null!;

    @property({displayName: "开始界面三个按钮父节点", tooltip: "开始界面三个按钮父节点", type: Node})
    UI_btn: Node = null!;

    @property({displayName: "关于作者面板", tooltip: "关于作者面板", type: Node})
    aboutAuthor: Node = null!;

    onLoad () {
        // 键盘按下时
        systemEvent.on(SystemEvent.EventType.KEY_UP, (e: EventKeyboard) => {
            switch(e.keyCode) {
                // ESC键
                case KeyCode.ESCAPE:
                    // 关闭菜单
                    this.onbtn_closeSetUI();

                    // 关闭关于开发者面板
                    this.onbtn_closeAbout();
                    // console.log("esc");
                    break;
            }
        }, this);

        // 更新窗口状态文字显示
        this.update_window();

        // 设置复选按钮 是否全屏
        let b = Electron.isFullScreen();
        if (b) {
            this.tg0.isChecked = true;
        } else {
            this.tg1.isChecked = false;
        }

    }


    start () {
        // 显示一些信息
        this.label_state.string = Electron.getMassage();

        // 获取所有支持的分辨率
        let a = Electron.getAllResolutions();
        let str = "\n";
        // 一行一行的放在一个字符串上
        for (let i = 0; i < a.length; i++) {
            str += (a[i]) + "\n";
        }

        // 显示在文字上
        this.label_resolution.string = 
        `
        当前分辨率：${Electron.getCurrentResolution()}\n
        屏幕支持的所有分辨率\n
        ${str}
        `
    }


    // 更新窗口显示状态
    update_window () {
        // 检测是否全屏
        let b = Electron.isFullScreen();
        // console.log("窗口状态，是否为全屏", b);
        
        // 设置文字
        if (b) {
            this.label.string = "当前状态：全屏";
        } else {
            this.label.string = "当前状态：窗口化"
        }
    }


    // 全屏窗口化复选按钮
    onbtn_tg0 () {
        // 全屏与窗口化
        if (this.tg0.isChecked == true) {
            Electron.fullScreen();
        } else if (this.tg0.isChecked == false) {
            Electron.window();
        }

        // 更新文字
        this.update_window();
    }


    // 打开关闭开发者工具复选按钮
    onbtn_tg1 () {
        if (this.tg1.isChecked == true) {
            Electron.openDevTools();
        } else if (this.tg1.isChecked == false) {
            Electron.closeDevTools();
        }
    }


    // 开关阴影
    onbtn_tg2 () {
        if (this.tg2.isChecked == true) {
            director.getScene()!.globals.shadows.enabled = true;
        } else if (this.tg2.isChecked == false) {
            director.getScene()!.globals.shadows.enabled = false;
        }
    }


    // 开关天空盒
    onbtn_tg3 () {
        if (this.tg3.isChecked == true) {
            director.getScene()!.globals.skybox.enabled = true;
        } else if (this.tg3.isChecked == false) {
            director.getScene()!.globals.skybox.enabled = false;
        }
    }


    // 开关全局雾
    onbtn_tg4 () {
        if (this.tg4.isChecked == true) {
            director.getScene()!.globals.fog.enabled = true;
        } else if (this.tg4.isChecked == false) {
            director.getScene()!.globals.fog.enabled = false;
        }
    }


    // 设置分辨率
    onbtn_setResolution () {
        if (this.eb0.string == "" || this.eb1.string == "") {
            return;
        }

        // 设置
        Electron.setResolution(Number(this.eb0.string), Number(this.eb1.string))
    }


    // 设置窗口大小
    onbtn_setSize () {
        if (this.eb2.string == "" || this.eb3.string == "") {
            return;
        }

        // 设置
        Electron.setSize(Number(this.eb2.string), Number(this.eb3.string))
    }


    // 更新一些信息的内容
    onbtn_updateSomeMessage () {
        this.label_state.string = Electron.getMassage();
    }


    // 打开设置界面
    onbtn_openSetUI () {
        this.UI.active = true;
        this.UI_btn.active = false;
        // 关闭关于开发者
        this.onbtn_closeAbout();
    }


    // 关闭设置界面
    onbtn_closeSetUI () {
        this.UI.active = false;
        this.UI_btn.active = true;
        // 滚动视图滚到最上面
        this.UI.getComponent(ScrollViewComponent)!.scrollTo(new Vec2(0, 1), 0.001);
    }


    // 退出游戏
    onbtn_quit () {
        Electron.quit();
    }


    // 打开关于作者面板
    onbtn_openAbout () {
        this.aboutAuthor.active = true;
    }


    // 关闭关于作者面板
    onbtn_closeAbout () {
        this.aboutAuthor.active = false;
    }


}